<template>
  <div class="box">
    <div class="appBox homeIndex">
      <div class="top">
        <div class="title">
          <div class="f18 fb">数据统计</div>
          <div class="end_time">截止至每日24小时</div>
        </div>
        <el-scrollbar>
          <div class="list">
            <div class="vfor"
                 v-for="item in data_top"
                 :key="item">
              <div class="">
                <div class="name">{{ item.name }}</div>
                <div class="num_unit">
                  <span class="num">{{ item.num }}</span>{{ item.unit }}
                </div>
              </div>
              <div>
                <img class="imgs"
                     :src="item.icon"
                     alt="" />
              </div>
            </div>
          </div>
        </el-scrollbar>
      </div>
      <div class="center flex">
        <div class="center-left">
          <div class="top_title_nav">
            <div class="title">
              <div>资金统计</div>
              <div class="small_title">截止至每日24时</div>
            </div>
            <el-tabs v-model="editableTabsValue"
                     class="demo-tabs"
                     @edit="handleTabsEdit">
              <template #addIcon>
                <el-icon><Select /></el-icon>
              </template>
              <el-tab-pane v-for="item in editableTabs"
                           :key="item.name"
                           :label="item.title"
                           :name="item.name">
                <div class="content">
                  <div class="forbox"
                       v-for="i in item.content"
                       :key="i.name">
                    <div>{{ i.name }}</div>
                    <div class="num">
                      {{ i.num }} <span class="unit">{{ i.unit }}</span>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
        <div class="center-right">
          <div class="top_title flex_sb">
            <div class="left_name">用户统计</div>
            <div class="right_name">截止至每日24时</div>
          </div>
          <div class="mt12 user_list flex_sb">
            <div v-for="i in userStatisticsList"
                 :key="i.name"
                 class="frobox">
              <div class="name">
                {{ i.name }}
              </div>
              <div class="mt10 num">{{ i.num }} {{ i.unit }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="center flex bottom">
        <div class="center-left">
          <div class="top_title flex_sb">
            <div class="title fb">
              管理员创客发展用户排行<span class="titlesm">创客用户发展数量</span>
            </div>
            <div>单位：人</div>
          </div>

          <el-table class="eltable mt20"
                    :data="tableData"
                    border
                    :header-cell-style="{ color: '#000' }">
            <el-table-column prop="managerSort"
                             label="排名"
                             width=""
                             align="center" />
            <el-table-column prop="managerName"
                             label="管理员"
                             width=""
                             align="center" />
            <el-table-column prop="seedUserCount"
                             label="创客用户数量"
                             width=""
                             align="center" />
            <el-table-column prop="seedGetUserCount"
                             label="创客用户发展用户"
                             width=""
                             align="center" />
            <el-table-column prop="workUserMonthCount"
                             label="入职人数"
                             width=""
                             align="center" />
            <el-table-column prop="unworkUserCount"
                             label="流失用户"
                             width=""
                             align="center" />
          </el-table>
          <div class="pagination">
            <el-pagination background
                           v-model:current-page="params.pageNum"
                           v-model:page-size="params.pageSize"
                           :page-sizes="[10, 20, 30, 50]"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="totalSize"
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange" />
          </div>
        </div>
        <div class="center-right">
          <div class="top_title flex_sb">
            <div class="left_name">待办事项</div>
            <div class="right_name"
                 @click="getData()">
              <el-icon size="20"
                       color="#000">
                <Refresh />
              </el-icon>
            </div>
          </div>
          <el-scrollbar v-if="false"
                        height="250px">
            <div class="mt12 user_list flex_sb">
              <div v-for="i in matterList"
                   :key="i.name"
                   class="frobox">
                <div>
                  <div class="name">
                    {{ i.name }}
                  </div>
                  <div class="state">{{ i.state }}</div>
                </div>
                <div :class="[{'errorNum':i.num > 0},'num']">
                  {{ i.num }}
                </div>
                <div class="identifying"
                     v-if="i.num > 0"></div>
              </div>
            </div>
          </el-scrollbar>
          <div class="f14 mt20">暂无数据</div>
        </div>
      </div>
    </div>
    <!-- <wangEditor /> -->
  </div>
</template>

<script lang="js">
import w1 from '../../assets/w1.png'
import w2 from '../../assets/w2.png'
import w3 from '../../assets/w3.png'
import w4 from '../../assets/w4.png'
import w5 from '../../assets/w5.png'
import { useMenuStore } from "@/store/userStore.js";
import { ref, onMounted, reactive, toRefs, defineComponent,getCurrentInstance } from "vue";
const menuStore = useMenuStore();
export default defineComponent({
  setup() {
    const app = getCurrentInstance()?.proxy
    onMounted(() => {
      // console.log(state.data_top);
      methods.tableList()
      methods.getData()
      // console.log(menuStore);
      // menuStore.changemenus()
    });
    const state = reactive({
      params: {
        pageNum: 1,
        pageSize: 10,
      },
      totalSize: 0,
      tableData: [
       
      ],
      userStatisticsList: [
        { name: "今日新增公海池用户", num: "0", unit: "人" },
        { name: "累计公海池用户", num: "0", unit: "人" },
        { name: "累计企业总数", num: "0", unit: "家" },
        { name: "累计招聘职位总数", num: "0", unit: "职位" },
      ],
      matterList: [
        { name: "提现申请", num: "0", state: "待审核状态" },
        { name: "离职申请", num: "0", state: "已欠费企业" },
        { name: "职位审批", num: "0", state: "今日扣款后即将欠费" },
        { name: "企业认证", num: "0", state: "未处理建议反馈" },
        { name: "薪酬账单审批", num: "0", state: "未处理建议反馈" },
      ],
      tabIndex: "1",
      editableTabsValue: "1",
      editableTabs: [
        {
          title: "金额",
          name: "1",
          content: [
            { name: "今日充值额", num: "0", unit: "元" },
            { name: "累计充值金额", num: "0", unit: "元" },
          ],
        },
        
      ],
      data_top: [
        {
          id: 'newUserCount',
          name: "今日新增用户",
          num: "10",
          unit: "人",
          icon: w1,
        },

        {
          id: ' newPositionCount',
          name: "今日新增岗位",
          num: "10",
          unit: "条",
          icon: w2,
        },
        {
          id: 'userWorkCount',
          name: "新增入职",
          num: "10",
          unit: "人 ",
          icon: w3,
        },
        {
          id: ' userUnWorkCount',
          name: "离职用户",
          num: "10",
          unit: "人",
          icon: w4,
        },
       
      ],
    });
    const methods = {
      tableList(){
       app.$post('firstPage/getManagerCountPage',state.params).then(res=>{
          if(res.data){
            state.tableData = res.data.list
            state.totalSize = res.data.total
          }
       }) 
      },
      getData(){
        app.$get('/firstPage/getPlatFirstPageCount').then(res=>{
          console.log(res);
          if(res.code == 200){
            state.data = res.data
            state.data_top[0].num =res.data.newUserCount
            state.data_top[1].num =res.data.newPositionCount
            state.data_top[2].num =res.data.userWorkCount
            state.data_top[3].num =res.data.userUnWorkCount
            state.editableTabs[0].content[0].num = res.data.withdrawalAmount
            state.editableTabs[0].content[1].num = res.data.monthWithdrawalAmount
            state.userStatisticsList[0].num = res.data.newUserseaCount
            state.userStatisticsList[1].num = res.data.totalUserseaCount
            state.userStatisticsList[2].num = res.data.totalCompanyCount
            state.userStatisticsList[3].num = res.data.totalPositionCount
            console.log(state.userStatisticsList);
            // state.matterList[0].num = res.data.companyApproveCount
            // state.matterList[1].num = res.data.companyArrearsCount
            // state.matterList[2].num = res.data.companyAboutToArrearsCount
            // state.matterList[3].num = res.data.feedBackCount
          }
        })
      },
       //分页变化
      handleSizeChange () {
        state.params.pageNum = 1;
        methods.tableList();
      },
      //表格翻页
      handleCurrentChange () {
        methods.tableList();
      },
          dictionaryData(){
              
            }
      };
    return {
      ...toRefs(state),
      ...methods,
    };
  },
});
</script>

<style scoped lang="scss">
.box {
  // padding: 20px;
  width: 100%;
  // height: calc(100vh - 100px);
  overflow: auto;
  background-color: rgba(237, 241, 245, 1);
  .homeIndex {
    margin-top: 0 !important;
    // padding: 0 !important;
    background: none !important;
  }
  .pagination {
    margin-top: 20px;
    height: 50px;
    display: flex;
    justify-content: flex-end;
  }
  .top {
    width: 100%;
    padding: 28px 26px;
    box-sizing: border-box;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 1);
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
    .list .vfor:nth-child(1) {
      margin-left: 0 !important;
    }
    .list {
      display: flex;
      // justify-content: space-between;
      margin-top: 17px;
      .vfor {
        flex-shrink: 0;
        margin-left: 18px;
        padding: 23px 18px;
        width: 295px;
        border-radius: 5px;
        background-color: rgba(242, 242, 247, 0.33);
        color: rgba(16, 16, 16, 1);
        font-size: 14px;
        display: flex;
        box-sizing: border-box;
        justify-content: space-between;
      }

      .imgs {
        width: 60px;
        height: 60px;
        border-radius: 50%;
      }

      .name {
        font-family: SourceHanSansSC-regular;
      }
      .num_unit {
        margin-top: 8px;

        color: rgba(83, 83, 83, 0.49);
        font-size: 14px;
        .num {
          font-size: 28px;
        }
      }
    }
    .title {
      display: flex;
      justify-content: space-between;
    }
    .end_time {
      color: #acacac;
      font-size: 14px;
    }
  }
  .center {
    background-color: rgba(237, 241, 245, 1);
    margin-top: 20px;
    justify-content: space-between;
    &-left {
      padding: 25px;
      box-sizing: border-box;
      width: calc(100% - 520px);
      border-radius: 5px;
      background-color: rgba(255, 255, 255, 1);
      color: rgba(16, 16, 16, 1);
      font-size: 14px;
      .top_title_nav {
        // align-items: center;
        // display: flex;
        // justify-content: space-between;
        position: relative;
        .title {
          color: rgb(83, 83, 83);
          font-size: 18px;
          font-weight: 600;
          display: flex;
          align-items: flex-end;
          position: absolute;
          right: 0;
          top: 5px;
        }
        .small_title {
          color: rgb(172, 172, 172);
          font-size: 14px;
          margin-left: 10px;
        }
      }
      .demo-tabs {
        .content {
          width: 100%;
          display: flex;
          justify-content: space-between;
          .forbox {
            width: 49%;

            padding: 25px 18px 31px;
            border-radius: 5px;
            background-color: rgba(242, 242, 247, 0.33);
            color: rgba(16, 16, 16, 1);
            .num {
              color: rgba(83, 83, 83, 0.49);
              font-size: 28px;
              margin-top: 12px;
            }
            .unit {
              font-size: 14px;
            }
          }
        }
      }
    }
    &-right {
      height: 229px;
      width: 502px;
      border-radius: 5px;
      background-color: rgba(255, 255, 255, 1);
      color: rgba(16, 16, 16, 1);
      padding: 19px 26px 21px;
      .top_title {
        .left_name {
          color: rgb(83, 83, 83);
          font-size: 18px;
          font-weight: bold;
        }
        .right_name {
          color: rgb(172, 172, 172);
          font-size: 14px;
        }
      }
      .user_list {
        margin-top: 10px;
        flex-wrap: wrap;
        .frobox {
          width: 49%;
          border-radius: 5px;
          background-color: rgba(242, 242, 247, 0.33);
          color: rgba(16, 16, 16, 1);
          padding: 12px 16px;
          margin-top: 14px;
        }
        .num {
          color: rgba(83, 83, 83, 0.49);
        }
      }
    }
  }
  .bottom {
    height: 310px;
    .center-right {
      height: auto !important;

      .right_name {
        cursor: pointer;
      }
      .frobox {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 14px 23px 18px !important;
        position: relative;
      }
      .state {
        color: rgba(83, 83, 83, 0.49);
        margin-top: 10px;
      }
      .num {
        font-size: 28px;
        color: rgba(83, 83, 83, 0.49);
      }
      .errorNum {
        color: rgba(255, 58, 48, 0.63);
      }
      .identifying {
        width: 10px;
        height: 10px;
        background-color: rgba(255, 58, 48, 0.63);
        color: rgba(16, 16, 16, 1);
        border-radius: 50%;
        position: absolute;
        right: 10px;
        top: 10px;
      }
    }
    .center-left {
      display: flex;
      flex-direction: column;
      ::v-deep(.el-table) {
        height: calc(100% - 40px) !important;
      }
      .top_title {
        color: rgb(172, 172, 172);
        .title {
          color: rgb(83, 83, 83);
          font-size: 18px;
        }
        .titlesm {
          color: rgb(172, 172, 172);
          font-size: 14px;
          margin-left: 15px;
        }
      }
    }
  }
  .flex_sb {
    display: flex;
    justify-content: space-between;
  }
}
</style>
